<template>
  <el-container>
    <el-header style="margin-top: 30px">
      <el-button type="primary" size="small" @click="toOemDetail">返回</el-button>
      <el-button v-show="dictFlowStatus=='TASK_PENDING'" type="primary" size="small" @click="toPass">强行通过</el-button>

      <el-button type="primary" size="small" @click="examineOemDialog1=true" v-if="dictFlowStatus=='TASK_PENDING' && dictOemExamineFlag=='C_YES'">oem审核</el-button>
    </el-header>
    <el-main>
      <el-tree
        :data="data"
        node-key="id"
        default-expand-all
        :expand-on-click-node="false"
        :props="defaultProps"
        style="margin-bottom: 5px">
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>{{ node.label.split(",")[0] }}</span>
          <!-- <span style="color: #909399;font-size: 13px" >{{ node.label.split(",")[5] }} - {{ node.label.split(",")[6] }}</span> -->
          <span style="color: red;font-size: 12px" v-if='node.label.split(",")[1]=="拒绝"'><el-button type="text" size="small"  @click="cardInfo(node.label.split(',')[3])">卡详情</el-button></span>
          <span style="color: red;font-size: 12px" v-if='(node.label.split(",")[1]=="拒绝")&&(node.label.split(",")[4]=="null")'><el-button type="text" size="small"  @click="cardInfo(node.label.split(',')[3])">卡详情</el-button></span>
          <span style="color: #409EFF;font-size: 12px" v-if='node.label.split(",")[1]=="通过"'><el-button type="text" size="small"  @click="cardInfo(node.label.split(',')[3])">卡详情</el-button></span>
          <span style="color: #1616ff;font-size: 12px" v-if='node.label.split(",")[1]=="待审核"'><el-button type="text" size="small"  @click="cardInfo(node.label.split(',')[3])">卡详情</el-button></span>
          <el-tooltip placement="top" v-if='node.label.split(",")[1]=="通过"||node.label.split(",")[1]=="拒绝"'>
            <div slot="content" v-if='node.label.split(",")[2]!="null"'>原因：{{ node.label.split(",")[2] }}</div>
            <div slot="content" v-if='node.label.split(",")[2]=="null"'>原因：无</div>
            <el-button class="reasonBtn"></el-button>
          </el-tooltip>
        </span>

      </el-tree>
      <el-dialog
        class="delete"
        top="33vh"
        :visible.sync="examineOemDialog"
        width="30%"
        :append-to-body="true">
        <span style="display: flex; justify-content: center;">
          <el-radio v-model="dictExamineStatus" label="C_THROUGH">强制通过</el-radio>
          <el-radio v-model="dictExamineStatus" label="C_REFUSE">维持现状</el-radio>
        </span>
        <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="examineOemDialog = false">取 消</el-button>
            <el-button size="small" type="primary" @click="isExamine()">确 定</el-button>
          </span>
      </el-dialog>
      <el-dialog
        class="delete"
        top="33vh"
        :visible.sync="isExamineOem"
        width="30%"
        :append-to-body="true">
        <span style="display: flex; justify-content: center;">确定{{msg}}吗？</span>
        <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="isExamineOem = false">取 消</el-button>
            <el-button size="small" type="primary" @click="examineOemSave">确 定</el-button>
          </span>
      </el-dialog>

      <el-dialog
        class="delete"
        top="33vh"
        :visible.sync="examineOemDialog1"
        width="30%"
        :append-to-body="true">
        <span style="display: flex; justify-content: center;">
          <el-radio v-model="dictExamineStatus" label="C_THROUGH">通过</el-radio>
          <el-radio v-model="dictExamineStatus" label="C_REFUSE">拒绝</el-radio>
        </span>
        <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="examineOemDialog1 = false">取 消</el-button>
            <el-button size="small" type="primary" @click="isExamine1()">确 定</el-button>
          </span>
      </el-dialog>
      <el-dialog
        class="delete"
        top="33vh"
        :visible.sync="isExamineOem1"
        width="30%"
        :append-to-body="true">
        <span style="display: flex; justify-content: center;">确定{{msg1}}吗？</span>
        <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="isExamineOem1 = false">取 消</el-button>
            <el-button size="small" type="primary" @click="examineOemSave">确 定</el-button>
          </span>
      </el-dialog>
    </el-main>
    <el-dialog class="delete" top="33vh" :visible.sync="stockOutDialog" :append-to-body="true" width="30%">
      <span style="display: flex; justify-content: center;" prop="num">点击确定后该流程会直接结束，该流程发起人申请的卡</span>
      <span style="display: flex; justify-content: center;" prop="num">会直接退回到其名下，确定操作吗</span>
      <span class="dialog-footer" slot="footer">
        <el-button @click="outStockCancel" size="small" :loading="okloading">取 消</el-button>
        <el-button type="primary" @click="toPassSave" size="small" :loading="okloading">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog class="delete" top="13vh" :visible.sync="stockOutDialog1" :append-to-body="true" width="30%">
      <span style="display: flex; justify-content: center;" prop="num">
        <el-table
        :header-cell-style="{ 'background':$store.state.app.tableBgColor,'color':'#606266' }"
        :data="cardList"
        ref="table"
        tooltip-effect="dark"
        style="width: 100%"
        height="500"
        @sort-change="changeSort"
      >
        <el-table-column
          sortable='custom'
          prop="card"
          label="卡号"
          align="center">
        </el-table-column>
      </el-table>
      </span>
      <span class="dialog-footer" slot="footer">
        <el-button @click="stockOutDialog1 = false" size="small" :loading="okloading">取 消</el-button>
        <el-button type="primary" @click="stockOutDialog1 = false" size="small" :loading="okloading">确 定</el-button>
      </span>
    </el-dialog>
  </el-container>



</template>

<script>
import { mapGetters } from 'vuex'
import {
    getProcess,examineFlowOem,checkCards

} from '@/api/getData'

export default {
  name: 'Home',
  data(){
    return {
        cardList:[],
        dictExamineStatus:'C_THROUGH',
        msg:'',
        msg1:'',
        id:'',
        examineOemDialog:false,
        examineOemDialog1:false,
        isExamineOem:false,
        isExamineOem1:false,
        stockOutDialog: false,
        stockOutDialog1:false,
        cardListLoading:false,
        obj:{},
        filterText: '',
        flowId:'',
        dictFlowStatus:'',
        dictOemExamineFlag:'',
        data: [{
            label:'',
            id:'',
        }],
        defaultProps: {
            children: 'children',
            label: 'label',
        }
    }
  },

  created(){
    this.flowId = this.$route.query.flowId;
    this.dictFlowStatus = this.$route.query.dictFlowStatus;
    this.dictOemExamineFlag = this.$route.query.dictOemExamineFlag;
    this.getProcess()
  },
  watch: {
      filterText(val) {
          this.$refs.tree.filter(val);
      }
  },
  methods:{
      isNull(exp){
        if(exp == "null" || exp=="undefined" || exp==0){
            return true;
        }
      },
      changeStatus(id){
          this.examineOemDialog=true;
          this.id = id;
      },
      // 卡详情
      async cardInfo(id){
        // this.cardListLoading = true
        this.cardList = [];
        const returnData = await checkCards({
                  id:id
              },
              {
                  obj: this,
                  key: 'tableLoading'
              })
        if (returnData._result) {
          returnData.data.map(item=>{
            let data = {
              card:item
            }
          this.cardList.push(data)
          this.stockOutDialog1 = true
          })
        }
        this.cardListLoading  = false
      },
      toPass(){
        this.stockOutDialog = true
      },
      outStockCancel(){
        this.stockOutDialog = false
      },
      async toPassSave(){
        const returnData = await examineFlowOem({
                 id:this.flowId
              },
              {
                  obj: this,
                  key: 'tableLoading'
              })
          if (returnData._result) {
            this.processHeadList()
            this.stockOutDialog = false
            this.$message.success("操作成功")
          }
      },
      isExamine(){
          this.isExamineOem = true;
          if(this.dictExamineStatus == 'C_THROUGH'){
              this.msg = '强制通过'
          }
          if(this.dictExamineStatus == 'C_REFUSE'){
              this.msg = '维持现状'
          }
      },
      isExamine1(){
          this.isExamineOem1 = true;
          if(this.dictExamineStatus == 'C_THROUGH'){
              this.msg1 = '通过'
          }
          if(this.dictExamineStatus == 'C_REFUSE'){
              this.msg1 = '拒绝'
          }
      },
      async examineOemSave(){
          let s = await examineFlowOem({
              id: this.id,
              flowId:this.flowId,
              dictExamineStatus:this.dictExamineStatus
          })
          if(s._result){
              this.dictOemExamineFlag = s.data.dictOemExamineFlag
              this.$message.success("操作成功！")
              this.examineOemDialog=false;
              this.examineOemDialog1=false;
              this.isExamineOem = false;
              this.isExamineOem1 = false;
              this.getProcess()
          }
      },
      toOemDetail(){
          this.$router.push({
              path: '/examine/oemExam'
          })
      },

      changeSort(column) {
          //console.log(column);
          if (column.order == 'ascending') {
              this.descs = []
              this.ascs = [column.prop];
          } else {
              this.ascs = []
              this.descs = [column.prop];
          }
          this.inboundList();
      },

      handleSelectionChange(val) {
          this.tableChecked = val
          const length = this.tableChecked.length
          //console.log(`共 ${length} 条`)
      },
      handleSizeChange(val) {
          //console.log(`每页 ${val} 条`)
          this.pageSize = val
          this.inboundList()
      },
      handleCurrentChange(val) {
          //console.log(`当前页: ${val}`)
          this.currentPage = val
          this.inboundList()
      },
      tree(ss){
        for (var i in ss) {
              ss[i].label = ss[i].label+","+ss[i].dictExamineStatusName+","+ss[i].reason+","+ss[i].id+","+ss[i].remark//+","+ss[i].cardNumberStart+","+ss[i].cardNumberEnd;
              this.tree(ss[i].children);
         }
        return ss
      },
      // 流程详情
      async getProcess() {
          const returnData = await getProcess({
                  flowId:this.flowId
              },
              {
                  obj: this,
                  key: 'tableLoading'
              })
          if (returnData._result) {
              this.tableLoading = false
              // 数据回显
              var s = returnData.data
              console.log(s.children)
              var obj = {
                  label:s.label+","+s.dictExamineStatusName+","+s.reason+","+s.id+","+s.remark,//+","+s.cardNumberStart+","+s.cardNumberEnd
                  id:s.id,
                  children:[]
              };

              obj.children = this.tree(s.children)
              this.data.push(obj);
              for(var i = 0; i < (this.data.length-1); i++){
                  this.data.splice(i,1);
              }
              // returnData.data.records.map(item => {
              //     const obj = {}
              //     obj.reason = item.reason
              //     obj.superiorDictExamineStatus  = item.superiorDictExamineStatus
              //     obj.page  = item.page
              //     obj.cardNumberEnd  = item.cardNumberEnd
              //     obj.cardNumberStart  = item.cardNumberStart
              //     obj.dictFlowStatus  = item.dictFlowStatus
              //     obj.remark  = item.remark
              //     obj.flowId  = item.flowId
              //     obj.dictFlowType  = item.dictFlowType
              //     obj.userId  = item.userId
              //     obj.dictExamineStatusName  = item.dictExamineStatusName
              //     obj.dictExamineStatus  = item.dictExamineStatus
              //     obj.dictLastAgentFlagName  = item.dictLastAgentFlagName
              //     obj.dictLastAgentFlag = item.dictLastAgentFlag
              //     obj.pId  = item.pId
              //     obj.id  = item.id
              //     obj.insertTimeDate  = item.insertTimeDate
              //     obj.insertTime  = item.insertTime
              //     obj.insertTimeTime  = item.insertTimeTime
              //     this.data.push(obj)
              // })
              this.tableLoading = false
          }
      },
  },
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.disabledList-title{
  font-weight: bold;
  font-size: 14px;
  color: #606266;
  margin-right: 10px;
}
  .disabledList-tableTitle{
    font-weight: bold;
    color: #606266;
  }
  .block{
    text-align: right;
  }
  .el-dropdown-link {
    font-size: 20px;
    cursor: pointer;
  }
.el-popper[x-placement^=bottom] {
  margin-right: -41px;
  box-shadow: 0px 0px 10px #888888;
  margin-left: 5px;

  .operation {
    border: 0;
    outline: none;
    display: block;
    text-align: center;
    margin: 0;
  }
}
  .custom-tree-node{
    position: relative;
    margin-bottom: 5px;
  }
  .reasonBtn{
    position: absolute;
    top:0;
    left: 0;
    border: none;
    background: none;
    opacity: 0;
    width: 50px;
  }
</style>
